<template>
<div class="tabsMenus">
    <div v-show="toggleWrap">
        <van-tabs 
        v-model:active="active" 
        title-active-color="#dd1a21" 
        color="#dd1a21" 
        line-height="1px" 
        @click-tab="onClickTab"
      >     
        <van-tab v-for="(item) in tabsMenu" :title="item">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item) in homeBannerList" :key="item.id">
              <img :src="item.picUrl" alt="">
            </van-swipe-item>
          </van-swipe>
        </van-tab>
      </van-tabs>
      <div class="toggleWrap" @click="toggleWrapHandle">
        <div class="linear"></div>
        <div class="jiantou"><i class="iconfont icon-jiantou_liebiaozhankai" style="font-size:35px;"></i></div>
      </div>
    </div>
    <div v-show="!toggleWrap" class="hdWarp">
        <div class="tabWrap">
          <div class="tabAlter">全部频道</div>
          <i class="iconfont icon-jiantou_liebiaoshouqi liebiaoshouqi" style="font-size:35px;" @click="toggleWrapHandle"></i>
        </div>
        <div class="moreCate">
          <div 
            class="cateTag" 
            :class="active === index ? 'cateTag-active' : null" 
            v-for="(item,index) in tabsMenu" 
            :key="index"
            @click="toggleActiveHandel(index)"
          >
            {{ item }}
          </div>
        </div>

    </div>
</div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
  export default defineComponent({
    name:'',
  })
</script>

<script lang="ts" setup>
import {ref,onMounted} from "vue"
import {reqBannerList, reqCategoryData} from "@/api/homeApi"
import type{bannerInfo} from "@/types/homeTypes"
let active = ref(0)
let toggleWrap = ref(true)
let tabsMenu = ref(["推荐","居家生活","服饰鞋包","美食酒水","个护清洁","母婴亲子","运动旅行","数码家电","严选全球"])
let homeBannerList = ref<bannerInfo[]>()
let categoryItemList = ref([])

let emit = defineEmits(["toggleBar"])



function toggleWrapHandle(){
  toggleWrap.value = !toggleWrap.value
}
function toggleActiveHandel(number:number){
  active.value = number
  toggleWrap.value = true
  getCategoryData(number)
}

async function getCategoryData(num:number){
 try {
  homeBannerList.value = []
  let str1 = `d296955f70ba1d0dd60dd3105c75bdfe&__timestamp=${new Date()}&categoryId=1005000`
  let str2 = `d296955f70ba1d0dd60dd3105c75bdfe&__timestamp=${new Date()}&categoryId=1010000`
  let str3 = `d296955f70ba1d0dd60dd3105c75bdfe&__timestamp=${new Date()}&categoryId=109342004`
  let str4 = `d296955f70ba1d0dd60dd3105c75bdfe&__timestamp=${new Date()}&categoryId=1013001`
  let str5 = `d296955f70ba1d0dd60dd3105c75bdfe&__timestamp=${new Date()}&categoryId=1011000`
  let str6 = `85e2b27d9f6567bcd30d39149f15977e&__timestamp=${new Date()}&categoryId=109243029`
  let str7 = `85e2b27d9f6567bcd30d39149f15977e&__timestamp=${new Date()}&categoryId=1043000`
  let str8 = `85e2b27d9f6567bcd30d39149f15977e&__timestamp=${new Date()}&categoryId=109320005`
  switch (num) {
    case 0:
      let {data} = await reqBannerList()
      homeBannerList.value = data.focusList
      break;
    case 1:
        let r1 = await reqCategoryData(str1)
        homeBannerList.value = r1.currentCategory.bannerList
        categoryItemList.value = r1.categoryItemList
      break;
      case 2:
        let r2 = await reqCategoryData(str2)
        homeBannerList.value = r2.currentCategory.bannerList
        categoryItemList.value = r2.categoryItemList
        break;
      case 3:
        let r3 = await reqCategoryData(str3)
        homeBannerList.value = r3.currentCategory.bannerList
        break;
      case 4:
        let r4 = await reqCategoryData(str4)
        homeBannerList.value = r4.currentCategory.bannerList
        categoryItemList.value = r4.categoryItemList
        break;
      case 5:
        let r5 = await reqCategoryData(str5)
        homeBannerList.value = r5.currentCategory.bannerList
        categoryItemList.value = r5.categoryItemList
        break;
      case 6:
        let r6 = await reqCategoryData(str6)
        homeBannerList.value = r6.currentCategory.bannerList
        categoryItemList.value = r6.categoryItemList
        break;
      case 7:
        let r7 = await reqCategoryData(str7)
        homeBannerList.value = r7.currentCategory.bannerList
        categoryItemList.value = r7.categoryItemList
        break;
      case 8:
        let r8 = await reqCategoryData(str8)
        homeBannerList.value = r8.currentCategory.bannerList
        categoryItemList.value = r8.categoryItemList
        break;
  }
  return "ok"
 } catch (error) {
  return Promise.reject()
 }
}

function onClickTab(options:any){
   active.value = options.name
    emit("toggleBar",options.name,categoryItemList.value)
    getCategoryData(options.name)
}

// 获取首页轮播图
async function getHomeBanner() {
  let {data} = await reqBannerList()
  homeBannerList.value = data.focusList
}
onMounted(()=>{
  getHomeBanner()
})
</script>

<style scoped>
  .tabsMenus{
    position: relative;
    height: 200px;
  }
  .toggleWrap{
      width: 60px;
      height: 30px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 999;
  }
  .toggleWrap .linear{
    width: 20px;
    height: 30px;
     background-image: linear-gradient(90deg,hsla(0, 0%, 100%, 0.3) 0,#fff);
  }
  .toggleWrap .jiantou{
    width: 40px;
    height: 30px;
    background-color: #fdfdfd;
    text-align: center;
    line-height: 30px;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 6px;
  }
  .tabWrap{
    display: flex;
    justify-content: space-between;
    line-height: 30px;
  }
  .tabAlter{
    font-size: 17px;
    margin-left: 10px;
  }
  .moreCate{
    width: 95%;
    height: 170px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
  }
  .moreCate .cateTag{
    width: 80px;
    height: 30px;
    border: 1px solid #cccccc;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    margin-top: 5px;
    border-radius: 4px;
  }
  .moreCate .cateTag-active{
    border: 1px solid red;
    color: red;
  }
  /* 轮播图 */
  .my-swipe .van-swipe-item {
    width: 100%;
    height: 170px;
  }
  .my-swipe .van-swipe-item img{
    width: 100%;
    height: 100%;
  }
</style>